
<template>
  <el-row class="sharelistBox">
    <el-col :span="24" class="s-item tcommonBox" v-for="(item,index) in articleList" :key="'article'+index">
      <div class="article-content">
        <el-row>
          <el-col :span="1">
            <p>
              <img :src='item.avatar' alt="" class="maxW">
            </p>
          </el-col>
          <el-col :span="10">
            <p>
              <span>{{item.name}}</span>
              <i class="fa fa-fw fa-clock-o"></i>
              <span v-html="showInitDate(item.createTime,'all')">{{showInitDate(item.createTime,'all')}}</span>
            </p>
          </el-col>
        </el-row>

        <p style="text-indent:2em;">
          {{item.mes}}
        </p>
      </div>

    </el-col>

  </el-row>
</template>

<script>
import Avatar from '@/assets/talkAvater/tou.png';
import {initDate} from '../../utils/server.js'
export default {
  name:'Talk',
  data() { //选项 / 数据
    return {
      // 查询参数
      articleList:[{
        mes:'这是一首简单的小情歌',
        avatar:'',
        createTime:'2024-03-15',
        name:'小白'
      },{
        mes:'真的假的，我居然被录取了',
        avatar:'',
        createTime:'2024-03-1',
        name:'小白'
      },{
        mes:'今天阳光灿烂，心情美美哒',
        avatar:'',
        createTime:'2024-02-20',
        name:'小白'
      },{
        mes:'码农终究还是逃不过改bug的',
        avatar:'',
        createTime:'2024-02-10',
        name:'小白'
      },{
        mes:'今天是网站上线第一天，万事开头难，开了头就快成功啦！嘻嘻',
        avatar:'',
        createTime:'2024-01-17',
        name:'小白'
      }
      ],
      hasMore:true
    }
  },
  mounted() {
    this.articleList.forEach(item=>{
      item.avatar=Avatar
    })
// 调用方法对 articleList 进行排序
//     this.articleList= sortByCreateTime(this.articleList);
  },
  methods: { //事件处理器
    showInitDate: function(oldDate,full){
      return initDate(oldDate,full)
    },

    //对 articleList 进行排序
    sortByCreateTime() {
        this.articleList.sort((a, b) => {
        // 将字符串类型的时间转换为 Date 对象进行比较
        const timeA = new Date(a.createTime);
        const timeB = new Date(b.createTime);
        // 比较时间并返回比较结果
        return timeB - timeA; // 降序排序
      });
    }

  },

}
</script>

<style>

.maxW{
  height: 26px;
}

/*分享标题*/
.shareclassTwo li{
  display: inline-block;
}
.shareclassTwo li a{
  display: inline-block;
  padding:3px 7px;
  margin:5px 10px;
  color:#fff;
  border-radius: 4px;
  background: #64609E;
  border: 1px solid #64609E;
  transition: transform 0.2s linear;
  -webkit-transition: transform 0.2s linear;
}
.shareclassTwo li a:hover{
  transform: translate(0,-3px);
  -webkit-transform: translate(0,-3px);
}

/*文章列表*/
.sharelistBox{
  transition: all 0.5s ease-out;
  font-size: 15px;
}

.tcommonBox{
  padding:10px;
}

.s-item .article-content p{
  margin-top: 5px;
}

</style>
